<template>
  <BaseTable :data="tableData" align="center" @refreshTable="refreshTable">
    <template #headerLeft>
      <el-button type="primary">新增用户</el-button>
      <el-button>批量删除用户</el-button>
    </template>
    <el-table-column type="selection" width="55" />

    <el-table-column prop="date" label="Date" width="150" fixed="left">
    </el-table-column>
    <el-table-column prop="date2" label="date2" width="150" fixed="left">
    </el-table-column>
    <el-table-column prop="date3" label="date3" width="150" fixed="left">
    </el-table-column>
    <el-table-column prop="date4" label="date4" width="150" fixed="left">
    </el-table-column>
    <el-table-column prop="date5" label="date5" width="150" fixed="left">
    </el-table-column>
    <el-table-column type="index" width="55" label="" fixed="right" />
    <el-table-column label="Delivery Info" fixed="left">
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column label="Address Info">
        <el-table-column prop="state" label="State" width="120">
          <template #header="scope"
            ><span style="color: red"> {{ scope.column.property }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="City" width="120" />
        <el-table-column prop="address" label="Address" />
        <el-table-column prop="zip" label="Zip" width="120" />
      </el-table-column>
    </el-table-column>
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="test(scope)"
          v-if="scope"
          >查看{{ scope.$index }}</el-button
        >
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </BaseTable>
</template>
<script setup lang="ts">
import BaseTable from "@/components/baseTable/index.vue";

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
];

const refreshTable = () => {
  console.log("刷新表格");
};

const test = (scope: any) => {
  console.log(scope);
};
</script>

<style scoped lang="scss"></style>
